<include file="Public:header" />
<!--主体内容-->
<!--左边-->
<div class="centent_box">
    <include file="Public:left" />
    <!--右边-->
    <div class="centent_right_box">
        <div class="centent_right rightCon">
            <div class="Mtitle">
                <ul>
                    <li class="on"><span>录入房源</span></li>
                </ul>
                <div class="rightWord"><a href="{:U('Used/index')}">房源管理</a> &gt;&gt; 录入房源</div>
            </div>
            <form id="info_form" action="{:U('Used/second')}" method="post">
            <div class="con_div">
                <ul class="formList width2 list_ul list_mp">
                    <li>
                        <label>房源属性：</label>
                        <select class="selectStyle" name="data[sell_type]" id="sell_type">
                            <option value="3">租售</option>
                            <option value="1">出售</option>
                            <option value="2">出租</option>
                        </select>
                    </li>
                    <li>
                        <label>房源名称：</label>
                        <input type="text"  name="title" id="autocomplete" class="inputStyle width3" placeholder="输入小区名查询">
                    </li>
                    <li>
                        <span>
                            <spna style="color: #6e6e6e" >已选择地区：</spna>
                            <spna class="clear">
                                 <input type="text"  name="area_name" id="area" class=""  readonly>
                                <input type="hidden"  name="area_id" id="area_id">
                            </spna>

                        </span>
                        <span>
                            <spna style="color: #6e6e6e">已选择小区：</spna>
                            <spna class="clear">
                                <input type="text"  name="estate" id="estate_name" class=""  readonly>
                                <input type="hidden"  name="estate_id" id="estate_id">
                            </spna>

                        </span>

                    </li>
                    <li class="clear" id="area-sele" style="margin-top: 30px">
                        <label>选择栋数：</label>
                        <select class="selectStyle required" name="data[build]" id="build" validate="required:true" min="1" >
                            <option value="0">--请选择--</option>
                        </select>
                            <span id="s-unit">
                                <label style="width: 60px">单元：</label>
                                <select class="selectStyle" name="data[unit]" id="unit" validate="required:true" min="1">
                                    <option value="0">--请选择--</option>
                                </select>
                            </span>

                        <label style="width: 60px">门牌：</label>
                        <select class="selectStyle" name="data[room]" id="room"validate="required:true" min="1">
                            <option value="0">--请选择--</option>
                        </select>
                    </li>
                    <li>
                        <span class="tip">如果没有对应的房屋信息请点这里 --></span>
                        <label><button onclick="manual()">手动输入</button></label>
                    </li>

                    <li style="margin-top: 30px">
                        <label></label>
                        <input type="submit" value="下一步" class="btnStyle">
                    </li>
                </ul>
            </div>
            </form>
        </div>
    </div>
</div>
<script src="__S__/js/jquery.validate.js"></script>
<script src="__S__/js/magess.js"></script>
<script src="__S__/js/jquery.metadata.js"></script>
<script type="text/javascript">
    $().ready(function() {
        $("#info_form").validate();
    });

</script>
<script>
    $( "#autocomplete" ).click (function (){
        $( "#autocomplete" ).val ('');
        $('#area').val ('');
        $('#estate_name').val ('');
        $("#build option[value='0']").nextAll('option').remove();
    });
    //自动填充
    $( "#autocomplete" ).autocomplete({
        source: "{:U ('Ajax/autoEstate')}",
        select: function(event, ui){
            $(this).val (ui.item.label);
            $("#area").val( ui.item.area);
            $("#area_id").val( ui.item.area_id);
            $('#estate_name').val(ui.item.label);
            $("#estate_id").val( ui.item.value);
            event.preventDefault();
            //查找楼栋
            var url = "{:U('Ajax/getBuild')}";
            var data = {eid:ui.item.value};
            $.post (url, data, function (response){
                if (response.state = 'ok'){
                    var html = '';
                    $("#build option:eq(0)").nextAll('option').remove();
                    $.each (response.data, function (i,v){
                        html += '<option value="'+v.bid+'">'+v.alias+'</option>';
                    });
                    $('#build').append(html);
                }
            },'json');

        }
    });


    $('#build').change(function (){
        var text = $(this).find("option:selected").text();
        var id = $(this).val();
        if (text == '--请选择--') {
            $("#unit option:eq(0)").nextAll('option').remove();
            $("#room option:eq(0)").nextAll('option').remove();
            return false;
        }
        var url = "{:U('Ajax/getUnit')}";
        var data = {id:id};
        $.post (url, data, function (response){
            if (response.state == 'ok'){
                var html = '';
                var data = response.data;
                if (response.count >1){
                    $('#s-unit').show ();
                    $('#s-unit').attr ('validate', 'required:true');
                    $.each (data, function (i,v){
                        html += '<option value="'+v.unid+'">&nbsp;&nbsp;&nbsp;&nbsp;'+v.alias+'单元&nbsp;&nbsp;&nbsp;&nbsp;</option>';
                    })

                    $("#unit option:eq(0)").nextAll('option').remove();
                    $("#room option:eq(0)").nextAll('option').remove();
                    $('#unit').append(html);
                }else{
                    $('#s-unit').hide ();
                    $('#s-unit').attr ('validate', '');
                    $("#unit").empty();
                    var id = data[0].unid;
                    var url = "{:U('Ajax/getRoom')}";
                    var data = {id:id};
                    $.post (url, data, function (response){
                        if (response.state == 'ok'){
                            var html = '';
                            var data = response.data;
                            $.each (data, function (i,v){
                                html += '<option value="'+v.rid+'">&nbsp;&nbsp;&nbsp;&nbsp;'+v.floor+v.alias+'&nbsp;&nbsp;&nbsp;&nbsp;</option>';
                            })
                            $("#room option:eq(0)").nextAll('option').remove();
                            $('#room').append(html);

                        }else{
                            $("#room option:eq(0)").nextAll('option').remove();
                        }
                    }, 'json')

                }


            }else{
                $("#unit option:eq(0)").nextAll('option').remove();
                $("#room option:eq(0)").nextAll('option').remove();
            }
        }, 'json')
    });
    $('#unit').change(function (){
        var text = $(this).find("option:selected").text();
        var id = $(this).val();
        if (text == '--请选择--') {
            $("#room option:eq(0)").nextAll('option').remove();
            return false;
        }
        var url = "{:U('Ajax/getRoom')}";
        var data = {id:id};
        $.post (url, data, function (response){
            if (response.state == 'ok'){
                var html = '';
                var data = response.data;
                $.each (data, function (i,v){
                    html += '<option value="'+v.rid+'">&nbsp;&nbsp;&nbsp;&nbsp;'+v.floor+v.alias+'&nbsp;&nbsp;&nbsp;&nbsp;</option>';
                })
                $("#room option:eq(0)").nextAll('option').remove();
                $('#room').append(html);

            }else{
                $("#room option:eq(0)").nextAll('option').remove();
            }
        }, 'json')
    });
    //跳转手动输入
    function manual(title){
        var eid = $('estate_id').val()?$('estate_id').val():'';
        var title = $('#autocomplete').val()?$('#autocomplete').val():'';
        window.location.href = "{:U('manual')}"+'&title='+title+'&eid='+eid;
    }
</script>
<include file="Public:footer" />